<template>
  <div class="dateTopHeightStyle">
    <avue-crud
      :key="key"
      :data="data"
      :option="option"
      :page="page"
      @on-load="changePage"
      @row-save="save"
      @row-update="update"
      @row-del="remove"
      @sort-change="changeSort"
      @search-change="search"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
      <template slot="searchMenu">
        <el-button v-for="(item,index) in buttonSelf" :key="index" size="small" @click="selfButton(item.prop)">{{ item.label }}
        </el-button>
      </template>
    </avue-crud>
  </div>
</template>

<script>
export default {
  name: 'CommonTable',
  props: {
    data: {
      type: Array,
      default: function() {
        return []
      }
    },
    option: {
      type: Object,
      default: function() {
        return {}
      }
    },
    page: {
      type: Object,
      default: function() {
        return {}
      }
    },
    buttonSelf: {
      type: Array,
      default: function() {
        return []
      }
    },
    key: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      // isShowFlag: false
    }
  },
  methods: {
    changePage(page) {
      //        请求参数
      //        page.currentPage
      //        page.pageSize
      this.$emit('changePage', page)
    },
    changeSort(params) {
      //        请求参数
      //        params.prop 字段名
      //        params.order 升序降序
      this.$emit('changeSort', params)
    },
    save() {

    },
    update() {

    },
    remove() {

    },
    search(params, done) {
      done()
      this.$emit('search', params)
    },
    // 自定义按钮
    selfButton(prop) {
      this.$emit('selfButton', prop)
    },
    sizeChange(i) {
      this.$emit('sizeChange', i)
    },
    currentChange(j) {
      this.$emit('currentChange', j)
    }
  }
}
</script>

<style scoped>

</style>
